<template>
  <div style="margin:30px">
    <el-card>
      <div slot="header" class="clearfix" style="display:flex;">
        <p style="margin-top:10px">企业名称：</p><el-input v-model="params.enterpriseName" placeholder="请输入企业名称" style="width: 250px; margin: 0 10px" />
        <div class="block">
          缴费时间: <el-date-picker
            v-model="time"
            value-format="yyyy-MM-dd"
            style="width: 250px; margin: 0 10px"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
          <el-button type="primary" @click="onInquire">查询</el-button>
        </div>
      </div>
      <!-- 列表区域 -->
      <el-row>
        <el-button type="primary" @click="onAdd('add')">添加账单</el-button>
      </el-row>
      <el-table :data="list">
        <el-table-column label="序号" width="80">
          <template #default="{$index}">
            {{ $index+1 +10*(params.page-1) }}
          </template>
        </el-table-column>
        <el-table-column label="账单编号" prop="billNumber" />
        <el-table-column label="企业名称" prop="enterpriseName" />
        <el-table-column label="租赁楼宇" prop="buildingName" width="180" />
        <el-table-column label="物业费(元/m²)" prop="propertyFeePrice" width="80" />
        <el-table-column label="账单金额(元/m²)" prop="paymentAmount" width="180" />
        <el-table-column label="缴费时间" prop="createTime" />
        <el-table-column label="操作">

          <template #default="{row}">
            <el-button type="text" @click="onAdd('examine',row.id)">查看</el-button>
            <el-button type="text" @click="onDel(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-row type="flex" justify="end" style="margin:10px 0">
        <el-pagination
          :current-page="params.page"
          :page-size="params.pageSize"
          layout="total,  prev, pager, next, sizes,jumper"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </el-row>
    </el-card>
    <!-- 弹出层 -->
    <add-fee ref="btnRef" :visible.sync="visible" @onSuccess="onLoad" />
    <!-- 编辑弹出层 -->
  </div>
</template>

<script>
import { getDelCondoFeeAPI, getListCondoFeeAPI } from '@/api/condoFee'
import addFee from './components/add-Fee.vue'
export default {
  components: { addFee },
  data() {
    return {
      visible: false, // 控制弹出层
      list: [],
      time: [],
      params: {
        page: 1,
        pageSize: 10,
        enterpriseName: '', // 企业名称
        start: '',
        end: ''
      },
      total: 10
    }
  },
  created() {
    this.onLoad()
  },
  methods: {
    // 点击查询
    onInquire() {
      this.onLoad()
    },
    // 点击删除
    async onDel(id) {
      await this.$confirm('你确定要删除此项吗？', '确认删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await getDelCondoFeeAPI(id)
      this.$message.success('删除成功')
      this.onLoad()
    },
    // 点击 判断是查看还是添加
    onAdd(type, id) {
      if (type === 'add') {
        this.visible = true
      }
      if (type === 'examine') {
        this.visible = true
        // 将id传到子组件
        // console.log(id)
        this.$refs.btnRef.formData.id = id
        this.$refs.btnRef.Look(id)
      }
    },
    async onLoad() {
      const res = await getListCondoFeeAPI(this.params)
      // console.log(res)
      this.list = res.data.rows
      this.total = res.data.total
      // this.time = [0, 1]
      this.params.start = this.time[0]
      this.params.end = this.time[1]
    },
    // 监听页数
    handleCurrentChange(val) {
      this.params.page = val
      this.onLoad()
    },
    handleSizeChange(val) {
      this.params.pageSize = val
      this.onLoad()
    }

  }
}
</script>

<style>

</style>
